import {
  useLocation,
  useRoutes,
  Navigate,
  useNavigate,
} from "react-router-dom";
import routes from "./index";
import { getStorageToken, removeStorageToken } from "@/utils/auth";
import { tokenKey } from "@/utils/constant";
import store from "@/store";
import { useEffect, useState } from "react";
import { fetchInfoAction, setRole, setToken } from "@/store/modules/user";
import { useDispatch } from "react-redux";
import { fetchChatlist } from "@/store/modules/chat";

// 拦截
//  * 获取token
//  *     token存在
//  *        是login ->重定向到主页(replace模式)
//  *        不是login 判断角色 -> seeker/boss页面拦截, seeker角色进入boss页面/boss角色进入seeker页面，跳转到404
//  *            没有role, 重新发起请求获取info-----> 有关角色的代码调整到组件内部
//  *     token不存在
//  *        是注册/登录(也就是白名单)页  -> 可访问   因为进入bossinfo和seekerinfo时没有登录，所以也可访问
//  *        不是登录/注册页  -> 到登录页
//  *
//  */
const RouterBeforeEach = (props) => {
  const dispatch = useDispatch();
  const location = useLocation();
  const routerKey = location.pathname;
  let whiteList = ["/login", "/register", "/bossinfo", "/seekerinfo"];
  //   是否有token
  const isLogin = !!getStorageToken(tokenKey);
  //   角色
  let role = store.getState().user.role;
  //   为空数组代表任何角色可进入
  let routeRole = props.route.meta?.role || [];
  if (props?.route?.meta?.title) {
    document.title = props.route.meta.title;
  }
  // debugger;
  if (isLogin) {
    if (routerKey === "/login") {
      return <Navigate to="/" replace />;
    } else {
      if (role && routeRole.length && !routeRole.includes(role)) {
        return <Navigate to="/page401" replace />;
      }
      return <div>{props.children}</div>;
    }
  } else {
    if (!whiteList.includes(routerKey)) {
      return <Navigate to="/login" replace />;
    } else {
      return <div>{props.children}</div>;
    }
  }
};

// 渲染路由
const renderRoutes = (routes) => {
  return routes.map((item) => {
    const route = item;
    if (item.component) {
      // element 要接收react.element类型 item.component 是对象 所以要转一下
      route.element = (
        <RouterBeforeEach route={item}>
          <item.component routeMeta={item.meta} />
        </RouterBeforeEach>
      );
    }
    if (item.children) {
      route.children = renderRoutes(item.children);
    }
    return route;
  });
};

// 有关进入Home页面的逻辑 （有关获取role 以及进行role判断）
export function useHandleBeforeHome() {
  let navigate = useNavigate();
  let dispatch = useDispatch();
  let location = useLocation();
  useEffect(() => {
    (async () => {
      await dispatch(fetchInfoAction())
        .then((res) => {
          let code = res?.payload?.code;
          // 出错了（token失效等原因 到login重新登陆）
          if (code !== 2000) {
            dispatch(setToken(""));
            dispatch(setRole(""));
            removeStorageToken(tokenKey);
            navigate("/login");
          } else {
            dispatch(fetchChatlist())
            if (
              location.pathname === "/home" ||
              location.pathname.startsWith("/seeker") ||
              location.pathname.startsWith("/boss")
            ) {
              // 对role有要求的页面
              let role = store.getState().user.role;
              if (role === "seeker") {
                navigate("/boss/index");
              }
              if (role === "boss") {
                navigate("/seeker/index");
              }
            } else {
              // 对role有无要求的页面
            }
          }
        })
        .catch((err) => {
          dispatch(setToken(""));
          dispatch(setRole(""));
          removeStorageToken(tokenKey);
          navigate("/login");
        });
    })();
  }, []);
}
export default function () {
  // useRoutes API 把路由数组整合为 <Router> <Route path="xx" element="xxx"></Route>等 </Router>的路由组件  直接用于BrowserRouter中
  return useRoutes(renderRoutes(routes));
}
